<template>
  <el-scrollbar class="container" ref="container">
    <el-form :model="otherParams" ref="queryRef" :inline="true" label-width="160px">
      <el-row>
        <el-form-item label="省" prop="provinceId">
          <el-select v-model="otherParams.provinceId" placeholder="请选择省" @change="chooseProvince" clearable>
            <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="cityId">
          <el-select v-model="otherParams.cityId" placeholder="请选择市" @change="chooseCity" clearable>
            <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区/县" prop="countyId">
          <el-select v-model="otherParams.countyId" placeholder="请选择区/县" @change="chooseCounty" clearable>
            <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="项目名称" prop="pmName">
          <el-input v-model="otherParams.pmName" placeholder="请输入项目名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="专题名称" prop="smName">
          <el-input v-model="otherParams.smName" placeholder="请输入项目名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="数据类型" prop="tableName">
          <el-space>
            <el-select v-model="otherParams.status" placeholder="请选择" clearable @change="otherTypeChange">
              <el-option v-for="item in otherType" :key="item.dictItemId" :label="item.dictItemName"
                :value="item.dictItemCode"></el-option>
            </el-select>
            <el-select v-model="otherParams.tableName" placeholder="请选择" clearable @change="otherFormChange">
              <el-option v-for="item in otherForm" :key="item.dictItemId" :label="item.dictItemName"
                :value="item.description"></el-option>
            </el-select>
          </el-space>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label=" ">
          <el-button type="primary" @click="getOtherList">查询</el-button>
          <el-button plain @click="resetOtherParams">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <el-divider></el-divider>

    <el-row :gutter="10" class="mb8" style="float:left" v-if="columnDataChecked.length > 0">
      <el-col :span="1.5">
        <el-button type="primary" icon="Download" @click="handleExport">下载</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="Setting" @click="handleColumn">列设置</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="tableLoading" :data="tableData" :border="true" @selection-change="tableChange" stripe ref="table"
      v-if="columnDataChecked.length > 0">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column v-for="(item, index) in columnDataChecked" :key="item.fieldName" :label="item.name"
        :prop="item.fieldName" align="center" :min-width="minWidthSet(item.name)">
        <template #default="{ row }" v-if="checkDict(item.fieldName, otherTableField)">
          <dict-tag :value="row[item.fieldName]" :code="checkDict(item.fieldName, otherTableField)"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-link type="primary" :underline="false" @click="getFormDetail(row)">查看表单</el-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination style="margin-top: 15px" v-show="otherParams.total > 0" :total="otherParams.total"
      v-model:page="otherParams.page" v-model:limit="otherParams.rows" @pagination="getOtherList" ref="pagination" />

    <ColumnSetting ref="columnRef" v-model:open="columnSetting.open" :title="columnSetting.title" :columnData="columnData"
      @saveColumn="saveColumn"></ColumnSetting>
  </el-scrollbar>
</template>
<script setup>
import { getProvince, getChildArea } from "@/api/system/division"
import { getField, fieldOption } from '@/api/businessManage/dataLoader/otherData'
import { minWidthSet } from '@/views/businessManage/common/minWidth'
import { checkDict } from '@/views/businessManage/common/dict'
import { getDict } from '@/api/system/dict'
import { getOther } from '@/api/achievementSearch/otherData'
import ColumnSetting from '@/components/ColumnSetting'
import { getBaseUrlByLabel } from '@/views/businessManage/common/propertyTree'

const { proxy } = getCurrentInstance()
const router = useRouter()
// 省市县
const provinceData = ref([])
const cityData = ref([])
const areaData = ref([])
const getProvinceData = () => {
  getProvince().then(res => {
    if (res.code == 200) {
      provinceData.value = res.data
    }
  })
}
const chooseProvince = (value) => {
  otherParams.value.cityId = null
  otherParams.value.countyId = null
  otherParams.value.city = null
  otherParams.value.county = null
  cityData.value = []
  areaData.value = []
  otherParams.value.province = provinceData.value.find(item => item.id == value)?.name
  getChildArea(value).then(response => {
    cityData.value = response.data
  })
}
const chooseCity = (value) => {
  otherParams.value.countyId = null
  otherParams.value.county = null
  areaData.value = []
  otherParams.value.city = cityData.value.find(item => item.id == value)?.name
  getChildArea(value).then(response => {
    areaData.value = response.data
  })
}
const chooseCounty = (value) => {
  otherParams.value.county = areaData.value.find(item => item.id == value)?.name
}
// 属性表分类
const otherType = ref([])
const otherForm = ref([])
const getOtherData = () => {
  getDict('OtherData').then(res => {
    otherType.value = res.data
  })
}
const otherTypeChange = (val) => {
  otherParams.value.tableName = ''
  otherForm.value = []
  getDict(val).then(res => {
    otherForm.value = res.data
  })
}
const baseUrl = ref('')
const otherTableName = ref('')
const otherTableField = ref('')
const idName = ref('')
const otherFormChange = val => {
  otherTableName.value = otherForm.value.find(item => item.description == val)?.dictItemName
  baseUrl.value = getBaseUrlByLabel(otherTableName.value).baseUrl
  otherTableField.value = getBaseUrlByLabel(otherTableName.value).name
  idName.value = getBaseUrlByLabel(otherTableName.value).idName
}
const otherParams = ref({ page: 1, rows: 10, total: 0 })
const columnData = ref([])
const columnDataChecked = ref([])
const tableData = ref([])
const tableLoading = ref(false)
const getOtherList = () => {
  if (!otherParams.value.tableName) {
    proxy.$modal.msgWarning('请先选择数据类型！')
    return
  }
  tableLoading.value = true
  getField(baseUrl.value).then(res => {
    columnData.value = res.data
    columnDataChecked.value = res.data.filter(item => item.status == '1')
    getOtherTable()
  })
}
const getOtherTable = () => {
  let { page, rows, province, city, county, pmName, smName, tableName } = otherParams.value
  let params = { page, rows, province, city, county, pmName, smName, tableName }
  getOther(params).then(res => {
    tableData.value = res.data?.list
    otherParams.value.total = res.data?.total || 0
    tableLoading.value = false
  })
}
const resetOtherParams = () => {
  otherParams.value.page = 1
  otherParams.value.status = ''
  columnDataChecked.value = []
  proxy.resetForm('queryRef')
}
// 列设置
const columnSetting = reactive({
  open: false,
  title: '列设置'
})
const handleColumn = () => {
  columnSetting.title = otherTableName.value
  columnSetting.open = true
}
const saveColumn = (data) => {
  fieldOption(baseUrl.value, data).then(res => {
    proxy.$modal.msgSuccess('保存成功！')
    columnSetting.open = false
    getOtherList()
  })
}
// 查看表单
const getFormDetail = (row) => {
  router.push({ path: `/achievementSearch/index/${otherTableField.value}`, query: { id: row.smId, detailId: row[idName.value] } })
}
// 下载
const handleExport = () => {
  if (ids.value.length == 0) {
    proxy.$modal.msgWarning('请至少选择一条数据！')
    return
  }
  proxy.download(`${baseUrl.value}/dataExport/${ids.value}`, {}, `${otherTableName.value}${new Date().getTime()}.xls`)
}
const ids = ref([])
const tableChange = (val) => {
  ids.value = val.map(item => item[idName.value])
}

defineExpose({
  getProvinceData,
  getOtherData,
  resetOtherParams
})
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  min-height: 400px;
  overflow: auto;
}
</style>
